<template>
  <div class="member-gift-card">
    <div class="card-button">
      <xtx-button type="small default" @click="openExchange({})">兑换礼品卡</xtx-button>
      <a href="javascript:;">礼品卡使用说明</a>
    </div>
    <XtxTabs v-model="activeName" @tab-click="tabClick">
      <XtxTabsPanel v-for="item in giftCardType" :key="item.name" :label="item.label" :name="item.name"></XtxTabsPanel>
    </XtxTabs>
    <div class="card-list">
      <div v-if="loading" class="loading"></div>
      <div class="none">礼品卡列表还是空的</div>
    </div>
  </div>
  <!-- 兑换礼品卡的弹窗组件 -->
  <ExchangeDialog ref="giftCom"></ExchangeDialog>
</template>

<script>
import { giftCardType } from '@/api/constant'
import { reactive, ref } from 'vue'
import ExchangeDialog from './components/giftcard-exchange.vue'
export default {
  name: 'MemberGiftCard',
  components: {
    ExchangeDialog
  },
  setup () {
    const activeName = ref('valid')
    // 点击选项卡
    const tabClick = ({ index }) => {
      reqParams.page = 1
      reqParams.couponsType = index + 1
    }
    // 查询订单参数
    const reqParams = reactive({
      page: 1,
      pageSize: 5,
      couponsType: 1
    })
    const loading = ref(false)
    // 打开兑换礼品卡弹窗组件
    const giftCom = ref(null)
    const openExchange = () => {
      // 添加 {}
      giftCom.value.open()
    }
    return { activeName, tabClick, giftCardType, reqParams, loading, giftCom, openExchange }
  }
}
</script>

<style lang="less" scoped>
// :deep(.xtx-tabs) {
//   width: 50%;
// }
.member-gift-card {
  height: 100%;
  background: #fff;
  .card-button {
    height: 60px;
    position: absolute;
    right: 0;
    padding: 0 30px;
    :deep(.xtx-button) {
      border-radius: 0;
      color: @xtxColor;
    }
    a {
      color: @xtxColor;
      line-height: 60px;
      margin-left: 40px;
    }
  }
  .card-list {
    padding: 20px;
    min-height: 400px;
    position: relative;
    }
  .loading {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(255,255,255,.9) url(../../../assets/images/loading.gif) no-repeat center;
    }
  .none {
    height: 400px;
    text-align: center;
    line-height: 400px;
    color: #999;
    }
}
</style>
